HTML 


pecifying 


an Dynamically 


Ob jectives jiii 


> Understand Cascading Style Sheets 
> Create an embedded style sheet 

Lc Create a class 

» Detect browsers 

> Show and hide page elements 

> Change font size dynamically 

» Control font color dynamically 

œ Use an external style sheet 


Cascading Style Sheets (CSS) and scripts form the foundation of 
DHTML. Whereas scripting allows the browser to alter the page, CSS lets 
you specify in detail how the page and its elements should appear. An 
understanding of CSS’s simple syntax and organization opens the door 
to many new options for your Web pages’ appearance. gfi» Lydia is 
looking forward to adding new effects to the Nomad Ltd Web pages. 
First, she will look at CSS a bit more in depth, then she will use CSS to 
create an interactive page for her department. 


«) Understanding 
um. | Cascading Style 
Sheets 


With CSS, you can organize and expand the style attributes available in a Web page. CSS allows 
a Web page designer to easily specify attributes such as color, font size, and even position on the 
page for single objects or groups of objects, including text blocks, images, and all other DOM 
objects. CSS offers three different ways to specify style, which simplifies creating and changing 
Web page code. @fiæ» As Lydia reviews how to implement CSS in her Web pages, she studies 
the three levels of style available. 


Inline style 

Use inline style to take advantage of CSS’s extended formatting options for a small text block 
or other object a single time in your document. You use inline style—the most basic level of 
using CSS—to specify your selected attributes in the opening tag surrounding the text itself, as 
shown in Figure J-1. This method allows you to specify a format different from all others on the 
page. However, formatting all page objects using inline style is impractical, given the amount of 
typing required. 


gA*) Embedded style 

Use embedded style to simplify formatting multiple page elements. Figure J-2 shows the 
source for a page using embedded style. To create embedded styles, you associate style attrib- 
utes with HTML tags between the HEAD tags at the top of your Web page, creating a set of 
HTML code known as an embedded style sheet. Then, any place in the Web page code where 
you use the tags specified in the embedded style sheet, the text or object is formatted automat- 
ically with that style. Embedded style rather than inline style is a more efficient way to format 
an entire Web page. However, you can specify inline styles in a page that uses embedded styles 
when you have single objects that need their own style or style adjustment. Each inline style 
supersedes the embedded style defined for the object where it is used. 


gAs) External style 

Use external style to apply the global formatting of embedded style to multiple pages. External 
style allows you to specify formats and apply them to multiple Web pages rather than just one. 
External style also is known as linked style because, instead of listing style specifications at the 
top of your Web page, you create a link to an external document that contains the style code, 
known as an external style sheet. This method allows you to format a set of Web pages, such 
as a Web publication, with a uniform style and allows you to change the style for all pages later 
simply by editing the external style sheet. External style can be used in a page together with both 
inline and embedded styles. Just as inline style takes precedence over embedded style wherever 
you use it, embedded styles and inline styles both take precedence over external style. This sys- 
tem of precedence is known as cascading, and it gives CSS its name. Cascading allows you to 
apply a general format for a page or group of pages as well as to make local exceptions to the 
global style. 


FIGURE J-1: Web page containing inline style 


<LINK REL="stylesheet" HREF="nomadltd.css" TYPE="text/css"> 
<SCRIPT LANGUAGE="JavaScript"> 


NS4 = (document.layers) ? 1:0; 
IE4 = (document.all) ? 1:0; 


</SCRIPT> 


<STYLE TYPE="text/css"> 

<l-- 

H1 {font-family: arial, sans-serif; font-size: 20pt} 

H2 {font-family: "times new roman", times, serif; font-size: 14pt; font- 
style: italic} 

-question {font-family: "times new roman", times, serif; font-size: 12pt; 
font-weight: bold} 

ff--> 

</STYLE> 


i </HEAD> 
Inline style located 


in formatting tag 


<BODY BACKGROUND="Egg shell.jpg"> 
<DIV!STYLE="font-color: navy; text-decoration: underline" 
<H2Z>Frequently Asked Questions about</H2> 

<H1>Dynamic HTML (DHTML} </H1></DIV> 


ALIGN="center"> 


FIGURE J-2: Web page containing embedded style 


<HTML> 

<HEAD> 

<TITLE>Nomad Ltd DHTML FAQ</TITLE> 

<STYLE TYPE="text/css"> 

<l-- 

H1 {font-family: arial, sans-serif; font-size: 20pt; font-style: normal} 

Embedded style H2 {font-family: "times new roman", times, serif; font-size: 14pt; font- 
sheet style: italic} 

/f--> 

</STYLE> 

</HEAD> 

<BODY BACKGROUND="Egg shell.jpg"> 

<DIV ALIGN="center"><IMG SRC="nomad.jpg" ALIGN="right"> 

<H2>Frequently Asked Questions about</H2> 

<H1l>Dynamic HTML (DHTML) </H1></DIV><BR> 

<UL TYPE="disk"> 

<LI><DIV>What is Dynamic HTML?</DIV> 

<DIV>Dynamic HTML (DHTML} describes a set of new technologies for designing 

Web pages that allow new and more precise formatting features, along with 
o 10 Use faster access for users.</DIV><BR> 
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«) Creating an 
am | Embedded Style 


Sheet 


An embedded style sheet consists of one or more lines of HTML code specifying style attributes, 
surrounded by tags marking the section as CSS style specifications. You can associate style attrib- 
utes with any HTML structuring or formatting tag and then apply them to Web page elements 
simply by inserting the tags. Qf» After completing her basic research, Lydia decides to create 
a FAQ (which is an acronym for Frequently Asked Questions, pronounced “fak”) document 
about DHTML for her co-workers in Nomad Ltd’s information systems department. Lydia wants 
to take advantage of CSS to specify exactly how the page will appear in a user’s browser. Because 
she wants to create a uniform look for the page, she decides to create an embedded style sheet. 


1. Start your text editor, open the file HTML J-1.htm, then save it as a text document 
with the filename FAQ embedded style.htm 
This file contains the text of the FAQ Lydia is creating, along with basic HTML structuring 
tags. Lydia has enclosed each unit of text in opening and closing DIV tags to make it easy for 
her to add style attributes later. 


2. Select the text [replace with embedded style sheet], press [Delete], type <STYLE 


TYPE="text/css"> and press [Enter], then type <!-- and press [Enter] 

Embedded style sheets are placed in the Web page’s head section, which allows the browser 
to incorporate the styles in the text it displays in the body section. A browser recognizes the 
code as an embedded style sheet from the beginning and ending <STYLE> tags. The TYPE 
property in the STYLE tag tells the browser the language and format of the style sheet it 
marks. In this case, the language is CSS, and the information is in text format. The <!-- tag 
tells browsers that are not compatible with embedded style sheets to ignore this section. 


3. Type H1 {font-family: arial, sans-serif; font-size: 20pt; font-style: normal} and 
press [Enter] 
Lydia associates 20-point arial with the <H1> tag for use with the page’s main heading. By 
putting it first in a list of two, Lydia specifies arial as her font preference. Her second choice, sans- 
serif, instructs the user’s browser to use any sans-serif font if arial is not available. 


QuickTip 4. Type H2 {font-family: "times new roman", times, serif; font-size: 14pt; font-style: 
Font names composed of italic} and press [Enter] 
multiple words, such as Lydia has specified 14 point as the font size to associate with the <H2> tag, which is the 


times new roman, must be 
listed within quotation 


marks for a browser to rec- 5, Type //--> and press [Enter], then type </STYLE> 


oa as single Figure J-3 shows the completed Web page source containing the style sheet. 


subheading. 


6. Check the document for errors, make changes as necessary, then save FAQ embedded 
style.htm as a text document 


7. Start your browser program, cancel any dialup activities, then open the file FAQ 


embedded style.htm 
The Web page appears as shown in Figure J-4. 


FIGURE J-3: Completed embedded style sheet 


<HTML> 
<HEAD> 
<TITLE>Nomad Ltd DHTML FAQ</TITLE> 


<STYLE TYPE="text/css"> 

<!-- 

H1 {font-family: arial, sans-serif; font-size: 20pt; font-style: normal} 
H2 {font-family: "times new roman", times, serif; font-size: 14pt; font- 
style: italic} 

//--> 

</STYLE> 


Opening and 
closing embedded 
style sheet tags 


Style specifications 
for heading tags 


</HEAD> 


<BODY BACKGROUND="Egg shell.jpg"> 

<DIV ALIGN="center"><IMG SRC="nomad.jpg" ALIGN="right"> 
<H2>Frequently Asked Questions about</H2> 

<H1l>Dynamic HTML (DHTML) </H1></DIV><BR> 


<UL TYPE="disk"> 
<LI><DIV>What is Dynamic HTML?</DIV> 


<DIV>Dynamic HTML (DHTML) describes a set of new technologies for designing 
Web pages that allow new and more precise formatting features, along with 
faster access for users.</DIV><BR> 


; FIGURE J-4: Web page formatted with embedded style sheet 
Text formatted with 


H2 style specified in 4 
embedded syle. | Frequently Asked Questions about Nomad ted 
sheet 
Text formatted with] Dynamic HTML (DHTML) 
n 


H1 style specified i 
embedded style 


sheet e What is Dynamic HTML? 
Dynamic HTML (DHTML) describes a set of new technologies for designing Web pages 
that allow new and more precise formatting features, along with faster access for users. 


+ Is DHTML a new language? 
DHTML is not a new language. DHTML is simply a snazzy name for a set of new 
features that recent Web browsers are equipped to interpret and use. DHTML features 
work only within the context of a standard HTML document. 


e How does DHTML work? 
DHTML uses two new pieces in concert with HTML. The first is scripts that run on the 
user's browser, written in a scripting language such as JavaScript or VBScript. The other 
is Cascading Style Sheets, a new method of specifying exact styles for a Web page's 


elemente 
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5) Creating a Class 


In addition to specifying style for all occurrences of a particular HTML tag, you also can name 
HTML a set of style specifications and then associate, or Call, this name in tags within your Web page. 
a This named style, known as a class, allows you to format selected elements with an embedded 
style, without requiring that each element be enclosed in the same tag or that every occurrence 
of a certain tag display the same style. All class names begin with a period to mark them as 
classes. To apply a class to an element, you add the CLASS attribute to the element’s opening 
HTML tag. Qf» Lydia’s bulleted list is a series of questions and answers. Lydia wants to for- 
mat the headings in her list, which are the questions, differently than the paragraph text, which 
are the answers. She creates a class that specifies the formatting for the questions and then calls 
the class within the opening <DIV> tag for each of the questions. 


1. Open the file HTML J-2.htm in your text editor, then save it as a text document with 
the filename FAQ class.htm 


2. Select the text [replace with class style] in the embedded style sheet, then press 
[Delete] 


3. Type .question {font-family: "times new roman", times, serif; font-size: 12pt; font- 
weight: bold} and press [Enter] 


The dot preceding the style name “question” indicates that the style specification is for a 
class. 


4. Select the text [replace with class] in the <DIV> tag for the first question, then 
press [Delete] 
5. Type CLASS="question" 


The tag now reads <DIV CLASS="question">. This calls the class and applies the style asso- 
ciated with the class “question” to this text, which is the first question in the FAQ. 


6. Repeat Steps 4 and 5 for the remaining six questions 
Figure J-5 shows a portion of the completed source for the bulleted list. 


7. Check your document for errors, make changes as necessary, then save FAQ class.htm 
as a text document 


8. Click the browser program button on the taskbar, then open the file FAQ class.htm 
The Web page appears as shown in Figure J-6. 


Class definition 


FIGURE J-5: Web page source using a class 


H2 {font-family: "times new roman", times, serif; font-size: 14pt; font- 
style: italic} 


inserted in gg sce = {font-family: "times new roman", times, serif; font-size: 12pt; 


embedded style 
sheet 


Class question 
called in <DIV> 
tags 


Bold format added 
using class property 


t-weight: bold} 
//--> 
</STYLE> 


</HEAD> 


<BODY BACKGROUND="Egg shell.jpq"> 

<DIV ALIGN="center"><IMG SRC="nomad.jpg" ALIGN="right"> 
<H2>Frequently Asked Questions about</H2> 

<H1>Dynamic HTML (DHTML}) </H1></DIV><BR> 


<UL TYPE="disk"> 


<LI><DIV|CLASS="question"PbWhat is Dynamic HTML?</DIV> 


namic HTML (DHTML) describes a set of new technologies for designing 
Web pages that allow new and more precise formatting features, along with 
fas cess for users .</DIV><BR> 


<LI><DIVICLASS="question"bIs DHTML a new language?</DIV> 


<DIV>DHTML is not a new language. DHTML is simply a snazzy name for a set of 
new features that recent Web browsers are equipped to interpret and use. 
DHTML features work only within the context of a standard HTML 


FIGURE J-6: Web page formatted with new class 


Frequently Asked Questions about 


Dynamic HTML (DHTML) 


+ What is Dynamic HTML? 
Dynamic HTML (DHTML) describes a set of new technologies for designing Web pages 
that allow new and more precise formatting features, along with faster access for users. 


Is DHTML a new language? 

DHTML is not anew language. DHTML is simply a snazzy name for a set of new 
features that recent Web browsers are equipped to interpret and use. DHTML features 
work only within the context of a standard HTML document. 


How does DHTML work? 

DHTML uses two new pieces in concert with HTML. The first is scripts that run on the 
user's browser, written in a scripting language such as JavaScript or VBScript. The other 
is Cascading Style Sheets, anew method of specifying exact styles for a Web page's 


s oo ae D ae oe more ny : : Sah : < ; . 
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Because all browsers have 
many unique properties, 
there are many different 
ways to detect which 
browser a user is running. 
You may see different 
browser-detection scripts in 
other Web pages. 


2. 
3. 


5) Detecting Browsers 


The combination of scripts and CSS allows you to add lag-free interactivity to your Web pages. 
HTML Although both fourth-generation browsers support DHTML, each does so in a different way. 
a Whereas the methods for creating basic effects in Internet Explorer and Netscape Navigator are the 
same, the code for most advanced DHTML features is different for each browser. This means that 
creating code offering dynamic features in both browser platforms, known as cross-browser code, 
often requires writing and integrating two different sets of code into a single page. Additionally, a 
cross-browser DHTML page requires a browser-detection script, which determines the user’s 
browser brand and generation. The browser then uses this information to determine which of the 
page’s DHTML scripts are appropriate for a user’s browser. @fæ= Lydia wants to add interactive 
DHTML features to control her FAQ page’s display. Before adding the coding to create these features, 
she inserts a browser-detection script into her page. 


L. 


Open the file HTML J-3.htm in your text editor, then save it as a text document with 
the filename FAQ browser detect.htm 

This copy of the FAQ page contains the CSS features Lydia created in the last lesson. 
Select the text [replace with browser-detection script], then press [Delete] 
Type the following script, pressing [Enter] at the end of each line: 

<SCRIPT LANGUAGE="javascript'> 

<!-- 

Nav4 = (document.layers) ? 1:0; 

IE4 = (document.all) ? 1:0; 

Il--> 

</SCRIPT> 


Lydia’s completed script, shown in Figure J-7, tells the browser to check for elements of the 
DOM, one of which is specific to Navigator 4 and the other of which is specific to Internet 
Explorer 4. The question mark in each line tells the browser to evaluate the preceding con- 
dition and to assign the variable the value 1, which equals “true” if the condition is true; oth- 
erwise, assign the variable the value 0, which is “false” if it is not true. This script determines 
if the browser is Netscape Navigator 4 or Internet Explorer 4. Based on the results of the 
conditional test, the browser reads the appropriate scripts, which create DHTML features in 
the user’s browser. 


. Check the document for errors, then make changes as necessary 
5. Save FAQ browser detect.htm as a text document 
. Open the file FAQ browser detect.htm in your browser to ensure it displays correctly, 


and debug the file as necessary until it displays as expected 


FIGURE J-7: Web page containing browser-detection script 


<HTML> 
<HEAD> 
<TITLE>Nomad Ltd DHTML FAQ</TITLE> 


<SCRIPT LANGUAGE="javascript"> 


Nav4 = (document.layers) ? 1:0; 
IE4 = (document.all) ? 1:0; 
ff--> 

</SCRIPT> 


Browser-detection 
script 


<STYLE TYPE="text/css"> 

<l-- 

H1 {font-family: arial, sans-serif; font-size: 20pt} 

H2 {font-family: "times new roman", times, serif; font-size: 14pt; font- 
style: italic} 

-question {font-family: "times new roman", times, serif; font-size: 12pt; 
font-weight: bold} 

{f--> 

</STYLE> 


</HEAD> 
<BODY BACKGROUND="Egg shell.jpg"> 


<DIV ALIGN="center"><IMG SRC="nomad.jpg" ALIGN="right"> 
<H2>Frequently Asked Questions about</H2> 
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“El” stands for element. Be 
sure to type £/ or e/ using the 
letter | and not the number 1. 


In Navigator 4, all the text is 
visible briefly when the page 
opens. 


1. 


7 
8 
D °. 


«) Showing and Hiding 


HTML Page Elements 


By working together with embedded scripts, CSS can specify how page elements should display 
in different situations and in response to user actions, which allows you to create the interactive 
features that are the hallmark of DHTML. Qf» Lydia wants her Web page to hide the para- 
graphs containing the answers and to display each answer only when the user clicks its corre- 
sponding question. Lydia can create this feature, known as an expandable outline, with a 
combination of style sheets and scripts. Lydia has already inserted the code to create this feature 
in Navigator 4. Now, she adds code that Internet Explorer 4 can interpret. 


Open the file HTML J-4.htm in your text editor, then save it as a text document with 
the filename FAQ show and hide.htm 


Notice that this copy of the FAQ page already contains the browser detection script. 


2. Scroll and select [replace with expandlE function], then press [Delete] 


> 3. 


Type the following code, pressing [Enter] at the end of each line 
function expandlE(el) { 
theEl=eval(el + "Answer"); 
if (theEl.style.display == "none") { 
theEl.style.display="block’; 
theEl.expanded=true; 


} 

else { 
theEl.style.display="none"; 
theEl.expanded=false; 

} 


} 


Figure J-8 shows the new code. 


. scroll down to the <DIV> tag for the first list item “What is Dynamic HTML?”, select 


the text [replace with opening A tag] and the space following it, then press [Delete] 


. Type <A HREF="#" onClick="expand(‘one’); return false"> 


Because Lydia uses an A tag with # as a dummy href, the mouse pointer becomes a hand when 
it moves over the question which indicates to the user that clicking the text triggers an action. 
The remaining code uses the onClick event handler to call the function expand and specifies the 
variable ‘one’ for the function to process. The function expand checks which browser the user 
is running and, in Internet Explorer 4, calls the expandIE function you entered earlier. 


6. Replace the text [replace with closing A tag] in the next line with </A> 
. Repeat Steps 4 through 6 for the remaining six list items, substituting ‘two’ for ‘one’ 


in item two, and so forth 
Figure J-9 shows a portion of the completed code for the expanding FAQ list. 


. Use Figures J-8 and J-9 to check the document for errors, make changes as neces- 


sary, then save FAQ show and hide.htm as a text document 


Open FAQ show and hide.htm in your browser, then click the first question 
As Figure J-10 shows, the text for the first question is displayed. 


FIGURE J-8: FAQ page with added script 


function expand{el} { 
if (!ver4) return; 
if (IE4) { 
expandIE (el) 
} 
else { 
expandNav (el 
} 
} 


function expandIE (el) { 
theEl=eval(el + "Answer"); 


if (theEl.style.display == "none") { 
: theEl.style.display="block"; 
Script to make theBl.expanded=true; Change value of 
outline expandable } : 
in IE4 siset display property for 
theEl.style.display="none"; a clicked line 


theEl.expanded=false; 
} 
function expandNav(el) { 


theEl=eval ("document." + el + "Answer"); 
if (theEl.visibility == "hide") { 


FIGURE J-9: <A> tags added to list items 


<H3>Click any of the popular questions about DHTML below to see its 
answer .</H3> 


<DIV ID="oneQuestion" CLASS="question"” 
return false"><P>What is Dynamic 


A HREF="#" onClick="expand ('one'}); 


<DIV ID="oneAnswer" C 
of new technologi 
formatting 


="answer"><P>Dynamic HTMLEN{DHTML) describes a set 
or designing Web pages that allo ew and more precise 
ures, along with faster access for users. ></DIV> 


Opening <A> tag < ID="twoQuestion" CLASS="question"><A HREF="#" onClick="expand ("two"); 
and event handler return false"><P>Is DHTML a new language?</P></A></DIV> 


inserted <DIV ID="twoAnswer" CLASS="answer"><P>DHTML is not a new language. DHTML \ 
simply a snazzy name for a set of new features that recent Web browsers are 
equipped to interpret and use. DHTML features work only within the context Closing </A> tag 
of a standard HTML document .</P></DIV> inserted 


<DIV ID="threeQuestion" CLASS="question"><A HREF="#" 
onClick="expand('three'); return false"><P>How does DHTML 
work?</ P></A></DIV> 


<DIV ID="threeAnswer" CLASS="answer"><P>DHTML uses two new pieces in concert 
with HTML. The first is scripts that run on the user's browser, written in a 
scripting language such as JavaScript or VBScript. The other is Cascading 


FIGURE J-10: Expanding FAQ list 


Frequently Asked Questions about 


Mouse pointer Dynamic HTML (DHTML) 


becomes hand over 
question text 


ick any of the popular questions about DHTML below to see its answer. 


Clicking question Dynamic HTML (DHTML) describes a set of new technologies for designing Web 
displ text pages that allow new and more precise formatting features, along with faster access 
ISplayS answer tex Fo Sers. 

Is DHTML a new language? 

How does DHTML work? 


What can | do with DHTML? 
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«) Changing Font Size 
am | Dynamically 


In the last lesson, you used a script to modify the style of an element in response to a user action. 
Using this general formula, you can add dynamic formatting to most style aspects of any object 
on your Web pages. A popular application of this method has been to change the appearance of 
text when a user points at it, commonly referred to as a rollover. A rollover changes text attrib- 
utes to make the text stand out. @fæ= Lydia wants to change the text size of the FAQ ques- 
tions when the user moves the pointer over them. Although adding this feature to graphics is 
straightforward in both browsers, Lydia finds that it is difficult to create for text blocks in 
Navigator. Because the feature is not crucial to the overall layout of her Web page, she decides to 
Gg Al focus on creating the feature only in Internet Explorer. 


1. Open the file HTML J-5.htm in your text editor, then save it as a text document with 
the filename FAQ text size.htm 
2. Scroll down the document to the ending </SCRIPT> tag in the document’s head sec- 
tion, select the text [replace with text size functions], press [Delete], then type the 
following functions, pressing [Enter] at the end of each line 
function changeText(whichQuestion) { 
if (Nav4) {return} 
whichQuestion.style.fontSize="16pt"; 


} 

function changeTextBack(whichQuestion) { 
if (Nav4) {return} 
whichQuestion.style.fontSize="12pt"; 

} 


Figure J-11 shows the functions entered into the Web page source. The first function, 
changeText, changes the font size of the object from which it was called to 16 point. The sec- 
ond function, changeTextBack, changes the font size of the calling object back to 12 point. 
3. Scroll down the page to the opening <A> tag for the first list item “What is Dynamic 
HTML?”, select the text [replace with event handlers], then press [Delete] 
4. Type onMouseOver="changeText(this)" onMouseOut="changeTextBack(this)" 
This code adds two new arguments to the heading. The first uses the onMouseOver event 
handler to call the changeText function you created earlier. The “this” is scripting shorthand 
to tell the function to make changes to the current object. The second argument calls the 
changeTextBack function for the current object in response to the mouse moving off the text. 
5. Repeat Steps 3 and 4 for the remaining six list items 
Figure J-12 shows source code containing the inline code for dynamically changing text size. 
6. Use Figures J-11 and J-12 to check the document for errors, make changes as nec- 
essary, then save FAQ text size.htm as a text document 
7. Open FAQ text size.htm in your browser, then move the pointer over a list item 
Figure J-13 shows the result of this step in Internet Explorer 4. Notice that the text size of 
the heading increased. However, if you opened FAQ text size.htm in a different browser, 
such as Netscape Navigator 4, no change occurs. 
8. Move the mouse pointer off the first heading 
The first heading returns to its original size. 


FIGURE J-11: Page containing new functions 


Changes current function changeText (whichQuestion) { 

text to larger font if (Nav4) {return} 

size whichQuestion.style.fontsSize="16pt"; 
} 

Changes larger text function changeTextBack (whichQuestion} { 
back to smaller font LE ANGE) TECTED) 

a whichQuestion.style.fontsSize="12pt"; 
} 

/f/--> 

</SCRIPT> 


FIGURE J-12: Page containing code to change text size 


<H3>Click any of the popular questions about DHTML below to see its 
P answer .</H3> 

Calls function to 
increase text size <DIV ID="oneQuestion" (LASS="question" ><A HREF="#" onClick="expand ("one"); 
return false" lonMouseOver="ChangeText (this) " 


onMouseout="changeTextBack (this} "><P>What is Dynamic HTML?</P></A></DIV> 
Calls function to | 


decrease text size <DIV ID="oneAnswer" CLASS="answer"><P>Dynamic HTML (DHTML) describes a set 
of new technologies for designing Web pages that allow new and more precise 
formatting features, along with faster access for users.</P></DIV> 


<DIV ID="twoQuestion" CLASS="question" ><A HREF="#" onClick="expand ("two"); 
return false" onMouseOver="ChangeText (this) " 
onMouseout="changeTextBack (this} "><P>Is DHTML a new language?</P></A></DIV> 


<DIV ID="twoAnswer" CLASS="answer"><P>DHTML is not a new language. DHTML is 
simply a snazzy name for a set of new features that recent Web browsers are 
equipped to interpret and use. DHTML features work only within the context 
of a standard HTML document.</P></DIV> 


<DIV ID="threeQuestion"” CLASS="question"><A HREF="#" 
onClick="expand {'three'); return false" onMouseOver="changeText (this) " 
onMouseout="changeTextBack (this) "><P>How does DHTML work?</P></A></DIV> 


<DIV ID="threeAnswer" CLASS="answer"><P>DHTML uses two new pieces in concert 


FIGURE J-13: Changed text size in Internet Explorer 4 


Frequently Asked Questions about 


Dynamic HTML (DHTML) 


Question font size : í : 
increases in Click any of the popular questions about DHTML below to see its answer. 


response to pointer 


What is Dynamic HTML? 


Is DHTML a new language? 


How does DHTML work? 
What can | do with DHTML? 
What do | need to learn to use DHTML? 
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«) Changing Font Color 
am | Dynamically 


Just as you can script a page to change text size in response to a user action, you can easily change 
or modify such scripts to change several other properties that control how text displays. @fipæ= In 
addition to the increase in text size, Lydia wants the heading font color to change in response to 
mouse pointing. She can modify the scripts she already created to alter font color at the same time 
they alter text size in Internet Explorer 4. 


1. Open the file HTML J-6.htm in your text editor, then save it as a text document with 
the filename FAQ text color.htm 


2. Scroll down the page to the changelext function in the page header, select the text 
[replace with changeText color], then press [Delete] 


3. Type whichQuestion.style.color="#9400D3"; 


4. Select the text [replace with changeTextBack color] in the changeTextBack function 
in the page header, then press [Delete] 


5. Type whichQuestion.style.color="#000000"; 
Figure J-14 shows the completed changes in the Web page source containing the color style. 
The changeText function increases the size of the text as well as changes the color for the 
selected object. The changeTextBack function returns the text to its original size and color. 


6. Check the document for errors, make changes as necessary, then save FAQ text 
color.htm as a text document 


7. Open the file FAQ text color.htm in your browser, then move the pointer over the first 
heading 


Figure J-15 shows the change, which again takes place only in Internet Explorer 4. In addi- 
tion to the size increase, the text turns purple, making it stand out from the other questions 
on the page. 


8. Move the mouse pointer off the first heading 
In Internet Explorer 4, the text size and color return to their default settings. 


FIGURE J-14: Color change code inserted 


function changeText (whichQuestion) { 
if (Nav4) {return} 
whichQuestion.style.fontSize="16pt"; 
whichQuestion.style.color="#9400D3"; 

} 

unction changeTextBack (whichQuestion) { 
if (Nav4) {return} 
whichQuestion.style.fontSize="12pt"; 
whichQuestion.style.color="#000000"; 


New script lines to 
change text color 


} 
//--> 
</SCRIPT> 


<STYLE TYPE="text/css"> 

<l-- 

H1 {font-family: arial, sans-serif; font-size: 20pt; font-style: normal} 
H2 {font-family: "times new roman", times, serif; font-size: 14pt; font- 
style: italic} 

H3 {font-family: arial; font-size: 12pt; color: #4619E1; position: relative; 
left: 20px; top: -10px} 

-question {font-family: "times new roman", times, serif; font-size: 12pt; 
font-weight: bold} 

-question A {font-family: arial; font-size: 12pt; font-weight: bold; text- 
decoration: none; color: black} 

.rest {position: absolute; left: 25px} 


FIGURE J-15: Color change in browser 


Frequently Asked Questions about 


Dynamic HTML (DHTML) 


Click any of the popular questions about DHTML below to see its answer. 


Changed text color —= WRA iS Dynamic HTML? 
Is DHTML a new language? 
How does DHTML work? 
What can | do with DHTML? 


What do I need to learn to use DHTML? 
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Both fourth-generation 
browsers ignore the highest- 
level heading definition in 
an external style sheet. 
Adding an empty style defi- 
nition named HO guarantees 
that all other heading defin- 


in your documents. 


a |. 


itions will display correctly 9 


5) | Using an External 
_ HTML Style Sheet 


When you create or manage a group of related Web pages, it is often helpful to create an exter- 
nal style sheet. Just as you use hyperlinks to refer to external HTML documents, you can link 
each Web page to the style sheet with a simple line of code. Creating an external style sheet 
allows you to apply a standard style to a set of Web pages and to easily make changes that apply 
to all the pages. Qf» Because Lydia plans to create other FAQ pages for her department, she 
has created an external style sheet to reflect the styles she wants all the FAQs to use. She also takes 
into account Nomad Ltd’s standard Web page style. She replaces the existing embedded style 
sheet with a link to the external file. The rules of cascading precedence allow her to leave in place 
the inline styles that help individualize the Web page by creating her dynamic effects. 


Open the file HTML J-7.css, then save it as a text document with the filename 


nomadltd.css 

This file contains the Nomad Ltd stylesheet. The document consists of text, just like an 
HTML document, and contains the opening and closing <STYLE> tags that tell browsers 
how to interpret the contents. A CSS document is formatted just like an embedded style 
sheet, except that it contains no HTML code outside of the <STYLE> tags. Lydia cut and 
pasted the styles from her FAQ page that she will apply to other pages she creates. 


. Select the text #4619E1 in the color definition for the H3 heading, press [Delete], 


then type #238E68 


This changes the color for the H3 style, which applies to the directions in Lydia’s current 
page, from blue to green. 


. Save nomaditd.css as a text document 
. Open the file HTML J-8.htm in your text editor, then save it as a text document with 


the filename FAQ external style.htm 
Lydia has removed the heading definitions from the embedded style sheet for her FAQ page 
because the external style sheet contains these specifications. 


. scroll down and select [replace with external style sheet link] which is just above 


the embedded style sheet, then press [Delete] 


. Type <LINK REL="stylesheet" HREF="nomaditd.css" TYPE="text/css"> 


Figure J-16 shows the page source containing the insertion. The LINK tag contains infor- 
mation about a file related to the current document. The REL attribute identifies the file 
type of the related file. The value assigned to HREF is the name and address of the file, just 
as for a hyperlink. TYPE specifies the format of the associated file because you can code 
associated information including style sheets in different ways. 


. Check the file for errors, make changes as necessary, then save FAQ external 


style.htm as a text document 


. Open the file FAQ external style.htm in your Web browser 


The Web page appears as shown in Figure J-17. Because both Navigator 4 and Internet 
Explorer 4 support basic CSS, the standardized Nomad Ltd format appears in both 
browsers. The instruction text color displays in green, which confirms that the page is using 
the external styles you defined. When Lydia links other FAQ Web pages to this nomadltd.css 
file as she develops them, then all her FAQ Web pages will have the same style. This helps 
ensure consistency for all her FAQ Web pages. 


FIGURE J-16: Web page code containing link to external style sheet 
} 


ff--> 

</SCRIPT> 
External style sheet 
. A = eshee = noma «Css = ex css 
link text <LINK REL="stylesheet" HREF=" dltd " TYPE="text/css"> 


<STYLE TYPE="text/css"> 

<!-- 

-question {font-family: "times new roman", times, serif; font-size: 12pt; 
font-weight: bold} 

-question A {font-family: arial; font-size: 12pt; font-weight: bold; text- 
decoration: none; color: black} 

-rest {position: absolute; left: 25px} 

{f--> 

</STYLE> 


</HEAD> 

<BODY BACKGROUND="Egg shell.jpgq"> 

<DIV ALIGN="center"><IMG SRC="nomad.jpg" ALIGN="right"> 
<H2>Frequently Asked Questions about</H2> 


<H1l>Dynamic HTML (DHTML) </H1></DIV><BR> 


<H3>Click any of the popular questions about DHTML below to see its 
answer .</H3> 


FIGURE J-17: Web page linked to external style sheet 


Frequently Asked Questions about 


Dynamic HTML (DHTML) 


Text color reflects 
change made to 
external style sheet 


Click any of the popular questions about DHTML below to see its answer. 


What is Dynamic HTML? 

Is DHTML a new language? 

How does DHTML work? 

What can I do with DHTML? 

What do | need to learn to use DHTML? 


What are Cascadina Stvle Sheets? 
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Label each DHTML item marked in Figure J-18. 
FIGURE J-18 


1 —— INK REL="stylesheet" HREF="nomadltd.css" TYPE="text/css"> 


CRIPT LANGUAGE="JavaScript"> 
<l-- 
2 NS4 = (document.layers) ? 1:0; 
IE4 = (document.all) ? 1:0; 
//--> 
</SCRIPT> 


3 <STYLE TYPE="text/css"> 
<i== 
H1 {font-family: arial, sans-serif; font-size: 20pt} 

H2 {font-family: "times new roman", times, serif; font-size: 14pt; font- 
style: italic} 

4 -question {font-family: "times new roman", times, serif; font-size: 12pt; 
font-weight: bold} 


<H2>Frequently Asked Questions about</H2> 
<H1>Dynamic HTML (DHTML) </H1></DIvV> 


Match each term with its description. 


6. Inline style a. System of precedence among style-sheet levels 
7. Embedded style b. Style associated with tags in Web page header 

8. External style c. Style specified in local occurrence of tag 

9. Cascading d. Named set of style specifications created as a tag attribute 
10. Class e. Style specified in separate linked document 


Select the best answer from the list of choices. 


11. The most efficient method for assigning style to several text blocks marked with the same tag on one Web 
page is 
a. Inline style. 
b. Embedded style. 
c. External style. 
d. Linked style. 


12. Embedded style sheets begin and end with which tagset? 
a. <SCRIPT> .. </SCRIPT> 
De SMES a SINLES 
Go) UESHEEL == -</5 1) FESHEBI= 
dvaCSo> 2 </Css> 


13. 


Practice 


A browser-detection script 

a. Makes your page’s DHTML features viewable with any browser. 

b. Tells the user’s browser which version of HTML your page uses. 

c. Tells the user’s browser which version of JavaScript your page uses. 
d. Determines and stores the user’s browser brand and generation. 


14. Which HTML tags does an external style sheet contain? 


15. 


a. An external style sheet contains no HTML tags. 

b. <SCRIPT> .. </SCRIPT> 

@ <SMS ASMUS 

ah <SCRIPI=>. </SCRIPT> and SMES a SSES 


Which HTML tag do you use to associate an external style sheet with a Web page? 
a. <LINK> 

b. <A> 

0 SSS 
d. <STYLE> 
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Create an embedded style sheet. 
a. Open the file HTML J-9.htm, then save it as a text document with the filename Tours FAQ embedded 
style.htm. 
b. Select the text [replace with embedded style sheet], press [Delete], type <STYLE TYPE="text/css">, press 
[Enter], then type <!-- and press [Enter]. 
. Type H1 {font-family: "comic sans ms", arial, sans-serif; font-size: 20pt} and press [Enter]. 
. Type H2 {font-family: "times new roman", times, bookman, serif; font-size: 16pt; font-style: italic} and press 
[Enter]. 
e. Type //--> and press [Enter], then type </STYLE>. 
f. Check the document for errors, make changes as necessary, then save Tours FAQ embedded style.htm as a 
text document. 
g. Open your Web browser, then open Tours FAQ embedded style.htm to view the Web page. 


a0 


Create a class. 

a. Open the file HTML J-10.htm in your text editor, then save it as a text document with the filename Tours FAQ 
class.htm. 

. Select the text [replace with class style] in the embedded style sheet, then press [Delete]. 

. Type title {font-family: garamond, arial, helvetica, sans-serif; font-size: 16pt; font-weight: bold}. 

. Select the text [replace with class] in the <DIV> tag for the first bulleted list item, then press [Delete]. 

. Type CLASS="title". 
Repeat Steps d and e for the remaining two bulleted titles. 

. Check the document for errors, make changes as necessary, then save Tours FAQ class.htm as a text document. 

. Open Tours FAQ class.htm in your browser, then view the document. 


=o o oa oa 


. Detect browsers. 


a. Open the file HTML J-11.htm in your text editor, then save it as a text document with the filename Tours FAQ 
browser detect.htm. 
b. Select the text [replace with browser detection script], then press [Delete]. 
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c. Type the following script, pressing [Enter] at the end of each line: 
<SCRIPT LANGUAGE="javascript"> 
<!-- 
NS4 = (document.layers) ? 1:0; 
E4 = (document.all) ? 1:0; 
/l--> 
</SCRIPT> 
d. Check the document for errors, then make changes as necessary. 
e. Save Tours FAQ browser detect.htm as a text document. 
f. Open Tours FAQ browser detect.htm in your browser, then debug if necessary. 


4. Show and hide page elements. 
a. Open the file HTML J-12.htm in your text editor, then save it as a text document with the filename Tours FAQ 
show and hide.htm. 
. Scroll down and select the text [replace with expandlE function], then press [Delete]. 
. Type the following code, pressing [Enter] at the end of each line 
function expandlE(el) { 
theEl=eval(el + "Expl"); 
if (theEl.style.display == "none") { 
theEl.style.display="block’; 
theEl.expanded=true; 


oO om 


} 

else { 
theEl.style.display="none"; 
theEl.expanded=false; 

} 


} 

. Scroll down to the <DIV> tag for the first list item "Athlete", select the text [replace with opening A tag] and 
the space following it, then press [Delete]. 

. Type <A HREF="#" onClick="expand(‘one’); return false"> 
Replace the text [replace with closing A tag] on the next line with </A>. 

. Repeat Steps d through f for the remaining two tour titles, substituting ‘two’ for ‘one’ in item two, and so 
forth. 

h. Check the document for errors, making changes as necessary, then save Tours FAQ show and hide.htm as a 

text document. 
i. Open Tours FAQ show and hide.htm in your browser, then click the first title “Athlete”. 
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. Change font size dynamically. 
a. Open the file HTML J-13.htm in your text editor, then save it as a text document with the filename Tours FAQ 
text size.htm. 
b. Scroll down the page, select the text [replace with text size functions], press [Delete], then type the following 
functions, pressing [Enter] at the end of each line 
function changeText(whichTitle) { 
if (Nav4) {return} 
whichTitle.style.fontSize="24pt"; 
} 
function changeTextBack(whichTitle) { 
if (Nav4) {return} 


C. 


d. 
e. 
f. 
g. 


o 


a. 
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whichTitle.style.fontSize="12pt"; 
} 
Scroll down the page to select the text [replace with event handlers] in the opening <A> tag for the first tour 
title “Athlete”, then press [Delete]. 
Type onMouseOver="changelext(this)" onMouseOut="changelextBack(this)". 
Repeat Steps c and d for the remaining two list items. 
Check the document for errors, make changes as necessary, then save Tours FAQ text size.htm as a text document. 
Open the file Tours FAQ text size.htm in your browser, then move the pointer over the first heading. 


Control font color dynamically. 


Open the file HTML J-14.htm in your text editor, then save it as a text document with the filename Tours FAQ 
text color.htm. 


. Select the text [replace with changeText color] in the changeText function in the page header, then press 


[Delete]. 


. Type whichtitle.style.color="#236B8E"; 
. Select the text [replace with changeTextBack color] in the changelextBack function in the page header, then 


press [Delete]. 


e. Type whichtitle.style.color="#000000"; 


g. 


~ 


a. 
b. 


c. 
d. 
e! 


. Check the document for errors, making changes as necessary, then save Tours FAQ text color.htm as a text 


document. 
Open the file Tours FAQ text color.htm in your browser, then move the pointer over the first heading. 


. Use an external style sheet. 


Open the file HTML J-15.htm, then save it as a text document with the filename Tours FAQ external style.htm. 
Scroll down the page, select the text [replace with LINK tag] before the opening <STYLE> tag, then press 
[Delete]. 

Type <LINK REL="stylesheet" HREF="nomaditd.css" TYPE="text/css'>. 

Check the file for errors, make changes as necessary, then save Tours FAQ external style.htm as a text document. 
Open the file FAQ external style.htm in your Web browser and notice the green color added to the instruction text. 


> 


Independent Challenges | 


J. As you update and expand the Sandhills Regional Public Transit Web site, you decide to incorporate DHTML fea- 
tures into your pages. Currently, you are working to make a page on rider tips more interactive and easier to read. You 
decide to add dynamic size and color to the items on this page. 
To complete this independent challenge: 
a. Open the file HTML J-16.htm in your text editor, then save it as a text document with the filename SRPT rider 
tips.htm. 
b. Select the text [replace with style sheet link] in the head section, press [Delete], then type <LINK REL=stylesheet 
HREF="HTML J-17.css" TYPE="text/css"> and save SRPT rider tips.htm as a text document. 
c. Select the text [replace with script], press [Delete], and type the following script, pressing [Enter] at the end of 
each line. 
<SCRIPT LANGUAGE="javascript"> 
<!-- 
Nav4 = (document.layers) ? 1:0; 
IE4 = (document.all) ? 1:0; 


function changeText(whichitle) { 
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if (Nav4) {return} 

whichTitle. style.fontSize="24 pt"; 

whichTitle.style.color="#FF6347" 
} 


function changelextBack(whichiitle) { 
if (Nav4) {return} 
whichTitle.style.fontSize="16pt"; 
whichTitle.style.color="#000000"; 
} 


/|--> 
</SCRIPT> 

d. Select the text [replace with event handlers] in the opening <DIV> tag for each of the five tips, press [Delete], 
then type onMouseOver="changelext(this)" onMouseQut="changelextBack(this)" 

e. Save SRPT rider tips.htm as a text document. 

f. Start your browser, cancel any dial-up activities, open SRPT rider tips.htm, then move the cursor over the tips to 
verify that they change color and increase in font size. 
Note: This change will only be noticeable if you are using Internet Explorer 4. 

g. If necessary, edit the code in your text editor until the DHTML features work in IE4, and save SRPT rider tips.htm as a 
text file. 


P. While reorganizing the Community Public School Volunteers Web publication, you decide that the pages should 
have a uniform style. You think the easiest way to create and apply this style would be to make an external style sheet 
and link each page to it. 
To complete this independent challenge: 
a. Open the file HTML J-18.htm in your text editor, then save it as a text document with the filename CPSV home.htm. 
b. Select the text of the embedded style sheet in the head section, including the opening and closing <STYLE> tags, 
then copy it to the Clipboard. 
c. Open a new text file in your text editor, paste the style sheet from the Clipboard into it, then save this file as a 
text document with the name CPSV style.css. 
d. Reopen CPSV home.htm in your text editor, delete the embedded style sheet from the head section, replace it with 
<LINK REL=stylesheet HREF="CPSV style.css" TYPE="text/css"> and save CPSV home.htm as a text document. 
e. Open CPSV home.htm in your Web browser and notice the formatting created by the external style sheet. 
f. If necessary, use your text editor to edit and save your document until it displays correctly. 


J. The Green House plant store’s most heavily viewed Web page lists popular items available at the store, along with 
descriptions and prices. The owners would like you to add DHTML features to this page. You decide to convert the list 
to an expanding outline. 
To complete this independent challenge: 
a. Open the file HTML J-19.htm in your text editor, then save it as a text document with the filename Green House 
supplies.htm. 
b. Select the text [replace with LINK tag], press [Delete], then type <LINK REL="stylesheet" HREF="HTML J-20.css" 
TYPE="text/css"> and save Green House supplies.htm as a text document. 
c. Select the text [replace with script], press [Delete], then type the following script, pressing [Enter] at the end of 
each line 
Nav4 = (document.layers) ? 1:0; 
IE4 = (document.all) ? 1:0; 


Practice 


ver4 =(Nav4 II 1E4)?1:0; 


function expandlE(el) { 
theEl=eval(el + "Desc"); 
if (theEl.style.display == "none") { 
theEl.style.display="block’; 
theEl.expanded=true; 


} 

else { 
theEl.style.display="none’; 
theEl.expanded=false; 

} 


} 


function changeText(whichProduct) { 
if (Nav4) {return} 
whichProduct.style.fontSize="24 pt’; 
whichProduct.style.color="#215E21"; 
} 


function changeTextBack(whichProduct) { 
if (Nav4) {return} 
whichProduct.style.fontSize="14 pt"; 
whichProduct.style.color="#000000"; 
} 

d. In the <DIV> tag for the first product name, Potting soil, select the text [replace with opening A tag], press 
[Delete], then type <A HREF="#" onClick="expand(‘one'); return false"; onMouseOver="changelext(this)" 
onMouseOut="changelextBack(this)"> 

e. Replace the text [replace with closing A tag] on the next line with </A>. 

f. Repeat Steps d and e for the remaining four product names, replacing ‘one’ with ‘two’ for the second item, and 
so forth, then save Green House supplies.htm as a text document. 

g. Open your browser, open Green House supplies.htm, then move the cursor over a heading and click it. 

Note: The text size and color events work only in Internet Explorer 4. 

h. If necessary, edit the code in your text editor until the expanding outline works and the text size and color changes 

work in IE4, then save Green House supplies.htm as a text document. 


AL. Even though it’s complicated, many Web page designers have created cross-browser code to create 
text-rollover effects in both major fourth-generation browsers. To complete this independent challenge, 
a~ open a search engine and search on one or more keywords, such as DHTML, cross-browser, or rollover. 
Using the results from the search engine, open and investigate Web sites that provide tutorials or articles 
on creating DHTML to find a sample of cross-browser text-rollover code. Print the code, along with any 
accompanying explanation. After reading the article and scanning the code, make a list on a separate sheet of paper of the 
compromises the designer found necessary when creating the code. Count the number of code lines necessary to create this 
feature and, if possible, total those used exclusively by each browser. Submit your printouts and your list to your instructor. 
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> Visual Workshop 


Add the dynamic size and color features shown in Figure J-19 to each of the five bulleted items in the file HTML J-21.htm. 
Open HTML J-21 in your text editor, then save it as a text document with the filename Books.htm. Use the script listed 
in Independent Challenge 1, Step 3 in the page’s head section. Use the code from Independent Challenge 1, Step C, in the 
opening <DIV> tags for the elements that will change color and size. Substitute the color #8E2323 (firebrick), or another 
color of your choice, to provide contrast to the background. 


Neen 


Book ordering guidelines 


In order to search for a book we don't have in stock, we need as muct 
information as you have about it. At a minimum, we recommend one 
of the following: 


. Author's name, 


e Full book title 
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